<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/css/docs.css">
  <style>
    .orbit-container li{
        transition: opacity .6s;
        opacity: 0;
        margin-left: 0%;
    }
    .orbit-container .orbit-slides-container > li{
        margin-left: 0%;

    }
    .orbit-container li.active{
        margin-left: 0%;
        opacity: 1;

    }

    .orbit-container-0 ul{
      height: 158px;
    }
    .orbit-container-0 img{
      height: 158px;
    }
    .orbit-container-1 ul{
      height: 220px;
    }
  </style>
</head>
<body>

<div class="" id="app">
<h4>Rendered HTML</h4>
</div>
<script name="slider" type="template/regular" id="slider">
<div class='tool'>
  <a class="small button warn" on-click="this.changeTheme()">Change Item Theme</a>
</div>
{{#list items as item}}
  <a class="small button" on-click="this.nav(item_index)">Goto Slide {{@(item_index+1)}}</a>
{{/list}}
<div class="orbit-container orbit-container-{{themeIndex}}"><ul class="example-orbit-content orbit-slides-container">
  {{#list items as item}}
  <li class={{active==item_index? "active": ""}}>
    {{#include themes[themeIndex]}}
  </li>
  {{/list}}
</ul>
<a href="#" class="orbit-prev" on-click={{this.nav(active-1)}}><span></span></a>
<a href="#" class="orbit-next" on-click={{this.nav(active+1)}}><span></span></a>
<div class="orbit-slide-number">
  <span>{{active+1}}</span> of <span>{{items.length}}</span>
</div>
</div>
</script>

<script src="../../dist/regular.js"></script>

<script>
  var Slider = Regular.extend({
    template: "#slider",
    config: function(data){
      if(!data.active) data.active = 0;
    },
    nav: function(active){
      var data = this.data;
      var len = data.items.length;
      data.active = (active + len) %  len;
    },
    changeTheme: function(){
      var data = this.data;
      var len = data.themes.length;
      data.themeIndex = (data.themeIndex + 1 + len) % len;
    }
  })


  var slider = new Slider({
    data: {
      themes: [
        '<div><h2>{{item.title}}</h2><h3>{{item.subtitle}}</h3></div>',
        '<img src="{{item.url}}" alt="slide {{item_index}}"> <div class="orbit-caption">{{item.subtitle}}</div>'
      ],
      themeIndex: 0,
      content: "<div><h2>{{item.title}}</h2><h3>{{item.subtitle}}</h3></div>",
      items: [
        {title: "Header1", subtitle: "subtitle1", url: "http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg"},
        {title: "Header2", subtitle: "subtitle2", url: "http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg"},
        {title: "Header3", subtitle: "subtitle3", url: "http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg"}
      ]
    }
  }).inject("#app")

</script>

  </body>
</html>